<template>
  <van-action-sheet
    v-model:show="show"
    title="9999 条评论"
    :closeable="false"
  >
    <div class="content">
      <div class="g-flex" v-for="(item, index) in 5" :key="index">
        <img class="user-head" src="//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1" alt="">
        <div class="g-m-l-10">
          <div>
            用户昵称
            <van-tag color="red">作者</van-tag>
          </div>
          <div>
            评论内容评论内容评论内容评论
            <span>1小时</span>
          </div>
          <div>
            1-28
            <span>回复</span>
          </div>
          <div>
            展开 4 条回复
          </div>
          <div>
            <template v-for="(item2, index2) in 3" :key="index2">
              <p v-if="item2%2 === 0">
                <span class="user-name">展开2</span> 回复
                <span class="user-name">@展开1</span>：ncdsnckdsncs
              </p>
              <p v-else>
                <span class="user-name">展开1</span>：cnjksdnckjs
              </p>
            </template>
          </div>
        </div>
        <div class="g-m-l-a">
          <van-icon class="like" name="like" />
          <div class="g-tc">999</div>
        </div>
      </div>
    </div>
  </van-action-sheet>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'Comment',
  props: {
    values: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  setup() {
    const state = reactive({
      show: false
    })

   const open = () => state.show = true

    return {
      ...toRefs(state),
      open
    }
  }
}
</script>

<style lang="scss" scoped>
.g-flex {
  display: flex;
}
.g-f-d-r {
  direction: row;
}
.g-f-d-c {
  direction: column;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-m-l-a {
  margin-left: auto;
}
.g-tc {
  text-align: center;
}
.g-m-t-10 {
  margin-top: 10px;
}
.tendency-img {
  font-size: 30px;
}
.actived {
  color: pink;
}
.g-m-l-10 {
  margin-left: 10px;
}
.content {
  box-sizing: border-box;
  height: 60vh;
  padding: 0 16px;
}
.content::-webkit-scrollbar {
  display: none;
}
.user-head {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.like {
  font-size: 26px;
  color: pink;
}
.user-name {
  color: skyblue;
}
</style>